<template>
  <div>
    <global-Header :user="currentUser" :headerstyle="isHome"></global-Header>
    <router-view />
    <FooterVue></FooterVue>
  </div>
</template>

<script setup lang="ts">
import "./assets/globals.css";
import "./assets/css/font.css";
import { ref, watch } from "vue";
import { useRoute } from "vue-router";
import GlobalHeader from "./components/Header.vue";
import FooterVue from "./components/Footer.vue";
import { computed } from "vue";
import { useStore } from "vuex";
import { GlobalDataProps } from "@/store";
import { debounce } from "lodash";

const resizeObserver = (window as any).ResizeObserver;
(window as any).ResizeObserver = class ResizeObserver extends resizeObserver {
  constructor(callback: (...args: any[]) => void) {
    callback = debounce(callback, 100);
    super(callback);
  }
};

// const currentUser: UserProps = {
//   isLogin: false,
// };
const store = useStore<GlobalDataProps>();
const currentUser = computed(() => store.state.user);
const isHome = ref(false);
const route = useRoute();
watch(
  () => route.name,
  (newVal) => {
    if (newVal == "home") {
      isHome.value = true;
    } else {
      isHome.value = false;
    }
  }
);
</script>

<style lang="scss" scoped></style>
